<!--
 * @Description: 
 * @Author: houcw
 * @Date: 2023-11-08 10:52:12
 * @LastEditTime: 2023-11-16 15:54:57
 * @LastEditors: houcw
 * @Reference: 
-->
<script setup >
import splitTextBox from "@/components/splitTextBox.vue";
import { ref } from "vue";
import { MoreFilled } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { deconDetail } from "@/api/disinfectionRecords.js";
const route = useRoute();
const id = route.query.id;
const loading = ref(false);
// 基础信息映射
const baseInfoMsg = ref({
  seq: "记录编号",
  flowName: "流程名称",
  equipName: "设备名称",
  operator: "操作人",
  operateTime: "操作日期",
  status: "操作状态",
  startTime: "开始时间",
  endTime: "结束时间",
});

// 患者信息映射
const patientInfoMsg = ref({
  patientName: "患者姓名",
  patientGender: "患者性别",
  patientAge: "患者年龄",
  patientIdNo: "身份证号",
});

// 时间关系映射
const timeInfoMsg = ref({
  startTime: "开始时间",
  endTime: "结束时间",
  duration: "操作时长",
});

const form = ref({});
// 状态映射 enum
const statusInfo = ref(["", "warning", "success", "danger", "danger"]);
// 基础信息
const baseStatusTextInfo = ref(["", "进行中", "已完成", "提前结束"]);
// 流程状态文本描述 enum
const statusTextInfo = ref(["", "进行中", "已完成", "异常", "提前结束"]);

// 性别
const genderInfo = ref(['','男','女'])

const activities = ref([
  {
    content: "涮洗",
    timestamp: "2018-04-03 20:46",
    color: "rgb(1, 145, 255)",
  },
  {
    content: "酶洗",
    timestamp: "2018-04-03 20:46",
    color: "rgb(1, 145, 255)",
    // size: "large",
  },
  {
    content: "酶洗",
    timestamp: "2018-04-03 20:46",
    color: "rgb(1, 145, 255)",
    // type: "primary",
    // hollow: true,
  },
]);

// 查询详情
const getDetail = () => {
  deconDetail({ id }).then((res) => {
    if (res.code == 0) {
      console.log(res, "res");
      // res.data.status = baseStatusTextInfo[res.data.status]
      form.value = res.data;
    }
  });
};
const handelDuration = (duration) => {
  let min = parseInt(duration / 60);
  let second = parseInt(duration % 60);
  let str = min ? min + "'" + second + "''" :second + "''";
  return str 
};

// 生命周期
onMounted(() => {
  getDetail();
});
</script>

<template>
  <div class="flex flex-colum heiall">
    <el-breadcrumb separator="|" class="mar-b-20 pad-t-10">
      <el-breadcrumb-item :to="{ path: '/home/index' }"
        >洗消记录</el-breadcrumb-item
      >
      <el-breadcrumb-item>
        <span class="blue">记录详情</span>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="flex1 flex over-hide" v-loading="loading">
      <div class="wrap">
        <div class="box mar-b-30">
          <splitTextBox text="基础信息" />
          <div class="rowItem" v-for="(item, key) in baseInfoMsg" :key="key">
            <span class="leftDesc">{{ item }}</span>
            <span class="rightText">{{
              form[key]
                ? key == "status"
                  ? baseStatusTextInfo[form[key]]
                  : form[key]
                : "-"
            }}</span>
          </div>
        </div>

        <div class="box box1">
          <splitTextBox text="患者信息" />
          <div v-if="form.patientName">
            <div
              class="rowItem"
              v-for="(item, key) in patientInfoMsg"
              :key="key"
            >
              <span class="leftDesc">{{ item }}</span>
              <span class="rightText">{{ key=='patientGender'?genderInfo[form[key]] :form[key] }}</span>
            </div>
          </div>
          <el-empty v-else description="无患者相关信息" />
        </div>
      </div>

      <div class="wrap1 mar-l-20">
        <splitTextBox text="流程详情" class="mar-b-15" />
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in form.nodeList"
            :key="index"
            :color="index == 0 ? 'rgb(1, 145, 255)' : 'rgb(1,1,1,.05)'"
            size="large"
            hollow
          >
            {{ activity.nodeName }}

            <el-tag
              class="mar-l-20"
              size="large"
              v-if="activity.status"
              :type="statusInfo[activity.status]"
              >{{ statusTextInfo[activity.status] }}</el-tag
            >

            <div class="mar-t-10 flex">
              <div
                class="rowItem mar-r-30"
                v-for="(item, key) in timeInfoMsg"
                :key="key"
              >
                <span class="leftDesc" v-if="activity[key]">{{ item }}</span>
                <span class="rightText minWidth" v-if="activity[key]">
                  {{
                    key == "duration"
                      ? handelDuration(activity[key])
                      : activity[key]
                  }}</span
                >
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
    

    
<style lang="scss" scoped>
@import "@/assets/mixin/css/tablePublic";
.container {
  color: black;
}

.wrap {
  width: 35%;
  height: 100%;
  //   background: #fff;
  overflow-y: auto;
  box-shadow: 0px 5px 10px rgba(222, 222, 222, 0.25);

  .box {
    // height: 425px;
    background: #fff;
    padding: 20px 25px;
    border-radius: 10px;
  }

  .box1 {
    // min-height: 320px;
    flex: 1;
  }
}
.wrap1 {
  width: 65%;
  background: #fff;
  padding: 25px;
  overflow-y: auto;
  box-shadow: 0px 5px 10px rgba(222, 222, 222, 0.25);
  border-radius: 10px;
}

.paddingTop {
  padding-top: 0px;
}

.rowItem {
  display: flex;
  align-items: center;
  margin: 10px 0px;
  .leftDesc {
    color: rgba(1, 1, 1, 0.5);
    display: inline-block;
    min-width: 80px;
    font-size: 16px;
  }
  .rightText {
    color: rgba(1, 1, 1, 0.8);
    font-size: 16px;
  }
  .minWidth {
    min-width: 80px;
  }
}
</style>